<template>
  <!--上传文档或多媒体组建-->
  <el-dialog :title="title"
             :visible.sync="value"
             width="25%"
             class="entityDialog"
             :before-close="closeDialog">
    <el-form label-width="80px"
             size="medium">
      <el-form-item label="对象选择">
        <el-input v-model="displayname"
                  @click.native="showTree"
                  :readonly="true"
                  placeholder="请选择对象"
                  style="width:100%"></el-input>
        <div v-show="isShow"
             class="treeDemo">
          <el-tree ref="tree"
                   :default-expand-all="true"
                   :props="defaultProps"
                   :data="treeData"
                   @node-click="handleNodeClick"
                   :render-content="renderContent">
          </el-tree>
        </div>
      </el-form-item>
      <el-form-item>
        <!--文件上传-->
        <a class="upload">选择文件
          <input class="fileUpload"
                 @change="handleChange()"
                 ref="file"
                 :accept="fileTypes"
                 type="file" />
        </a>
      </el-form-item>
      <el-form-item v-if="file_name!=''">
        <a class="el-upload-list__item-name">
          <i class="el-icon-document"></i>{{file_name}}
          <span class="file-delete">
            <i v-if="!file_del_flag"
               class="el-icon el-icon-upload-success el-icon-circle-check"
               @mouseover="handleMouseOver"></i>
            <i @mouseout="handleMouseOut"
               @click="handleDelFile"
               v-if="file_del_flag"
               class="el-icon el-icon-close"></i>
          </span>
        </a>
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary"
                 @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import util from '@/utils'
import { findAllWithBizGroupAsMap, uploadFile } from '@/api/archives'
export default {
    name: 'docOrMediaUpload',
    data () {
        return {
            displayname: '',
            // 树状菜单数据
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'displayname'
            },
            current_selectd_node: '',
            // 当前选择的文件
            current_file: '',
            // 文件名
            file_name: '',
            isShow: false,
            // 删除文件标识符
            file_del_flag: false,
            document_accept: ['txt', 'doc', 'pdf', 'docx', 'xlsx', 'xls', 'html'],
            media_accept: ['png', 'gif', 'jpg', 'mp4', 'ogg', 'mpeg', 'webm', 'mp3']
        }
    },
    props: {
        value: Boolean,
        type: String,
        rowkey: String
    },
    watch: {
        fileList () {
            if (this.fileList.length >= 1) {
                this.isDisabled = true
            } else {
                this.isDisabled = false
            }
        }
    },
    computed: {
        fileTypes () {
            if (this.type === 'Document') {
                return this.document_accept.map(item => '.' + item).join(',')
            } else {
                return this.media_accept.map(item => '.' + item).join(',')
            }
        },
        title () {
            if (this.type === 'Document') {
                return '新增文档'
            } else {
                return '新增多媒体'
            }
        }
    },
    methods: {
        handleMouseOver () {
            this.file_del_flag = true
        },
        handleMouseOut () {
            this.file_del_flag = false
        },
        handleDelFile () {
            this.current_file = ''
            this.file_name = ''
        },
        handleChange () {
            let file = this.$refs.file.files[0]
            let {name, size} = file
            size = (file.size) / 1024 / 1024
            if (size > 10) {
                this.$message({ message: '文件大小最大支持10M.' })
                return false
            }
            let names = name.split('.')
            let fileType = names[names.length - 1]
            if (this.type === 'Document') {
                if (!this.validFileType(this.document_accept, fileType)) {
                    this.$message({ message: '请上传文档类型的文件' })
                    return false
                }
            } else {
                if (!this.validFileType(this.media_accept, fileType)) {
                    this.$message({ message: '请上传多媒体的文件' })
                    return false
                }
            }
            this.current_file = file
            this.file_name = name
        },
        handleNodeClick (data, node) {
            if (node.level === 1) {
                return false
            }
            this.current_selectd_node = data
            this.displayname = data.displayname
            this.isShow = false
        },
        // 显示对象树
        showTree () {
            this.loadTree()
            this.isShow = true
        },
        handleDisChoose () {
            this.isShow = false
        },
        // 加载左侧菜单树
        async loadTree () {
            let group = this.type === 'Document' ? 'document' : 'media'
            let params = {
                groupList: [group]
            }
            let data = await findAllWithBizGroupAsMap(params)
            this.treeData = util.parseKeyData(data)
        },
        renderContent (h, { node, data }) {
            let img
            if (!util.isEmpty(data.icon)) {
                img = (
                    <img src={data.icon} class="userIcon" width="16px" height="16px" />
                )
            }
            // let radio = (
            //     <input
            //         type="radio"
            //         name="object"
            //         style="margin-right:12px;margin-top:12px;"
            //         on-change={() => this.checkChange(data, node)}
            //     />
            // )
            return (
                <p>
                    {img}
                    <span style="margin-left:10px;">{node.label}</span>
                </p>
            )
        },
        validFileType (fileTypes, fileType) {
            for (var i = 0; i < fileTypes.length; i++) {
                if (fileType.indexOf(fileTypes[i]) != -1) {
                    return true
                }
            }
            return false
        },
        // 表单提交
        handleSubmit () {
            if (this.displayname === '') {
                this.$message.error('请选择对象!')
                return
            }
            if (this.current_file === '') {
                this.$message({ message: `请选择需要上传的${this.objType === 'Document' ? '文档' : '多媒体'}` })
                return false
            }
            let objectUri = this.current_selectd_node.uri
            let fd = new FormData()
            fd.append('file', this.current_file)
            fd.append('objectUri', objectUri)
            fd.append('rowkey', this.rowkey)
            uploadFile(fd).then(response => {
                this.$message({ message: '上传成功', type: 'success' })
                this.closeDialog(response.data)
            })
        },
        // 关闭对话框
        closeDialog (data) {
            this.$emit('closeDialog', data)
            this.treeData = []
            this.isShow = false
            this.displayname = ''
            this.current_file = ''
            this.file_name = ''
        }
    }
}
</script>
<style lang="less"  >
.entityDialog {
	.el-checkbox__inner {
		border-radius: 10px;
	}
	.userIcon {
		position: relative;
		top: 10px;
	}
	.treeDemo {
		width: 60%;
		position: absolute;
		background-color: #fff;
		z-index: 33;
		border: 1px solid #e0e0e0;
		padding: 10px 0 30px;
		.opreation {
			margin-top: 10px;
			text-align: right;
			padding-right: 10px;
			.el-button {
				padding: 5px 15px;
				line-height: 16px;
			}
		}
	}
	.el-form-item {
		margin-bottom: 20px;
	}
	.upload {
		padding: 10px 15px;
		height: 20px;
		line-height: 20px;
		position: relative;
		background: #3a8ee6;
		text-decoration: none;
		border-radius: 5px;
		color: #ffffff;
	}
	.fileUpload {
		position: absolute;
		overflow: hidden;
		right: 0;
		top: 0;
		opacity: 0;
	}
	.file-delete {
		float: right;
		.el-icon {
			color: #67c23a;
		}
	}
}
</style>
